<template>
  <div class="player-container" id="playerRef"></div>
</template>

<script setup>
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import FlvPlugin from 'xgplayer-flv'
import { onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({
  url: {
    type: String,
    required: true,
  },
  width: {
    type: [String, Number],
    default: '100%',
  },
  height: {
    type: [String, Number],
    default: '100%',
  },
})
let player = null
watch(
  () => props.url,
  (newUrl) => {
    if (player) {
      player = new Player({
        id: 'playerRef',
        lang: 'zh-cn',
        // poster: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg",
        // isLive: true,
        autoplay: true,
        plugins: [FlvPlugin],
        url: props.url,
        width: '100%',
        height: '100%',
        isLive: true,
        flv: {
          cors: true,
          hasAudio: true,
          hasVideo: true,
        },
      })
    }
  },
  {
    immediate: true,
  },
)

onMounted(() => {
  player = new Player({
    id: 'playerRef',
    lang: 'zh-cn',
    // poster: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg",
    // isLive: true,
    autoplay: true,
    plugins: [FlvPlugin],
    url: props.url,
    width: '100%',
    height: '100%',
    isLive: true,
    flv: {
      cors: true,
      hasAudio: true,
      hasVideo: true,
    },
  })
})

onUnmounted(() => {
  if (player) {
    player.destroy()
    player = null
  }
})
</script>

<style scoped>
.player-container {
  width: 100%;
  height: 100%;
}
</style>
